<template>
  <div class="like" @click="handleLick">
    <i class="fa fa-heart" :class="{'fa-heart-like': likeInfo.like_status === 1}"></i>
    <span class="like-count">{{ likeInfo.fav_nums }}</span>
  </div>
</template>

<script>
import request from "../../utils/request";
export default {
  props: ["artInfo", "likeInfo", "readOnly"],
  methods: {
    requestAction(url) {
      // 这里只是使用artInfo中的id和type数据
      // 当从书记的详细信息点赞时，type需要写死是400
      const { id, type = 400 } = this.artInfo;
      request({
        url,
        method: "post",
        data: {
          art_id: id,
          type
        }
      });
    },
    handleLick(e) {
      if (!this.readOnly) {
        const { like_status } = this.likeInfo;
        if (like_status) {
          // 取消赞
          this.likeInfo.like_status = 0;
          this.likeInfo.fav_nums--;
          this.requestAction("like/cancel");
        } else {
          // 点赞
          this.likeInfo.like_status = 1;
          this.likeInfo.fav_nums++;
          this.requestAction("like");
        }
      }
    }
  }
};
</script>

<style scoped>
.like {
  /* 宽度自适应 */
  display: inline-block;
}
.fa-heart {
  color: #bbb;
}
.fa-heart-like {
  color: red;
}
.like-count {
  font-size: 24rpx;
  /* 消除字体上下的间距，通过line-height实现 */
  line-height: 24rpx;
  color: #bbb;
  position: relative;
  bottom: 10rpx;
  left: 6rpx;
}
</style>